import React, { Component } from 'react';
import { Button, Form, Icon, Input, InputNumber, Modal, Select, Upload, message } from 'antd';
// 引入编辑器组件
import BraftEditor from 'braft-editor'
// 引入编辑器样式
import 'braft-editor/dist/index.css'
import './tutor.less'

const FormItem = Form.Item;
const { Option } = Select;
const Dragger = Upload.Dragger;
class TutorForm extends Component {

    constructor(props) {
        super(props);
        this.state = {
            items: [],
            topic: [],
            label: [],
            categorys: [],
            categoryIndex: [],
            provinces: [{ 'provinceId': '11', 'province': '北京' }, { 'provinceId': '12', 'province': '天津' },
            { 'provinceId': '13', 'province': '河北' }, { 'provinceId': '36', 'province': '江西' },
            { 'provinceId': '15', 'province': '内蒙古' }, { 'provinceId': '21', 'province': '辽宁' },
            { 'provinceId': '22', 'province': '吉林' }, { 'provinceId': '23', 'province': '黑龙江' },
            { 'provinceId': '31', 'province': '上海' }, { 'provinceId': '32', 'province': '江苏' },
            { 'provinceId': '33', 'province': '浙江' }, { 'provinceId': '34', 'province': '安徽' },
            { 'provinceId': '35', 'province': '福建' }, { 'provinceId': '37', 'province': '山东' },
            { 'provinceId': '41', 'province': '河南' }, { 'provinceId': '42', 'province': '湖北' },
            { 'provinceId': '43', 'province': '湖南' }, { 'provinceId': '44', 'province': '广东' },
            { 'provinceId': '45', 'province': '广西' }, { 'provinceId': '46', 'province': '海南' },
            { 'provinceId': '50', 'province': '重庆' }, { 'provinceId': '52', 'province': '贵州' },
            { 'provinceId': '62', 'province': '甘肃' }, { 'provinceId': '64', 'province': '宁夏' },
            { 'provinceId': '14', 'province': '山西' }, { 'provinceId': '51', 'province': '四川' },
            { 'provinceId': '61', 'province': '陕西' }, { 'provinceId': '63', 'province': '青海' },
            { 'provinceId': '54', 'province': '西藏' }, { 'provinceId': '65', 'province': '新疆' },
            { 'provinceId': '53', 'province': '云南' }],
            areas: [{
                'continent_id': '1', 'continent_name': '港澳台',
                'country': [
                { 'country_id': '2', 'country_name': '香港' },
                { 'country_id': '3', 'country_name': '澳门' },
                { 'country_id': '4', 'country_name': '台湾' }]
            },
            {
                'continent_id': '2', 'continent_name': '亚洲', 
                'country': [
                { 'country_id': '20', 'country_name': '新加坡' },
                { 'country_id': '21', 'country_name': '韩国' },
                { 'country_id': '22', 'country_name': '日本' },
                { 'country_id': '26', 'country_name': '俄罗斯' }]
            },
            {
                'continent_id': '3', 'continent_name': '欧洲',
                'country': [
                { 'country_id': '13', 'country_name': '英国' },
                { 'country_id': '29', 'country_name': '法国' },
                { 'country_id': '30', 'country_name': '荷兰' },
                { 'country_id': '32', 'country_name': '德国' },
                { 'country_id': '33', 'country_name': '瑞士' },
                { 'country_id': '36', 'country_name': '意大利'},
                { 'country_id': '41', 'country_name': '瑞典' },
                { 'country_id': '43', 'country_name': '挪威' },
                ] 
            },
            {
                'continent_id': '4', 'continent_name': '北美', 
                'country': [{ 'country_id': '11', 'country_name': '美国' },{ 'country_id': '12', 'country_name': '加拿大' }]
            },
            {
                'continent_id': '5', 'continent_name': '澳洲',
                'country': [{ 'country_id': '14', 'country_name': '澳大利亚' },{ 'country_id': '15', 'country_name': '新西兰' }]
            }],
            selectArea: [],
            schools: [],
            specials: [],
            eduLevels: [{ 'id': '1', 'name': '本科' }, { 'id': '2', 'name': '硕士' }, { 'id': '3', 'name': '博士' }],
            itemId: '',
            editorState: BraftEditor.createEditorState('') // 创建一个空的editorState作为初始值
        }
    }

    initData = () => {
        var url = '/manage/item/query'
        const searchCondiction = new Object()
        searchCondiction.pageSize = 999;
        searchCondiction.pageNumber = 1;
        const conditionList = [];
        searchCondiction.conditionList = conditionList;
        fetch(url, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(searchCondiction)
        }).then((response) => {
            return response.json()
        }).then((res) => {
            if (res.code == 200) {
                let cataItems = res.result.list.filter(item => item.itemName != '导师招募')
                this.setState({
                    items: cataItems
                });
            }
        })
    }

    componentDidMount() {
        this.initData();
    }

    setTopicName = (event, index) => {
        const { form } = this.props;
        var value = event.target.value;
        const topics = form.getFieldValue('topic');
        console.log("topics", topics)
        topics.filter((topic, t_index) => {
            if (t_index == index) {
                topic.topicName = value
            }
        })
        form.setFieldsValue({
            topic: topics
        });
    }

    setTopicVoicePrice = (event, index) => {
        const { form } = this.props;
        var value = event.target.value;
        const topics = form.getFieldValue('topic');
        // console.log("000000", topics)
        topics.filter((topic, t_index) => {
            if (t_index == index) {
                topic.voicePrice = value
            }
        })
        form.setFieldsValue({
            topic: topics
        });
    }

    setTopicMeetPrice = (event, index) => {
        const { form } = this.props;
        var value = event.target.value;
        const topics = form.getFieldValue('topic');
        topics.filter((topic, t_index) => {
            if (t_index == index) {
                topic.meetPrice = value
            }
        })
        form.setFieldsValue({
            topic: topics
        });
    }

    setLabelName = (event, index) => {
        const { form } = this.props;
        var value = event.target.value;
        const labels = form.getFieldValue('label');
        labels.filter((label, t_index) => {
            if (t_index == index) {
                label.labelName = value
            }
        })
        form.setFieldsValue({
            label: labels
        });
    }

    handleChange(info) {
        const status = info.file.status;
        if (status !== 'uploading') {
            if (info.fileList[0]) {
                if (info.fileList[0].response.code == 200) {
                    this.props.form.setFieldsValue({
                        avatarUrl: info.fileList[0].response.message
                    });
                }
            }
        }
        if (status === 'done') {
            message.success(`${info.file.name} file uploaded successfully.`);
        } else if (status === 'error') {
            message.error(`${info.file.name} file upload failed.`);
        }
    }

    addTopic = () => {
        const { form } = this.props;
        const topics = form.getFieldValue('topic');
        if (topics.length === 3) {
            return;
        }
        const nextTopics = topics.concat({});
        form.setFieldsValue({
            topic: nextTopics,
        });
    };

    removeTopic = (index) => {
        const { form } = this.props;
        const topics = form.getFieldValue('topic');
        if (topics.length === 1) {
            return;
        }
        form.setFieldsValue({
            topic: topics.filter((topic, t_index) => t_index != index)
        });
    };

    addLabel = (index) => {
        const { form } = this.props;
        const labels = form.getFieldValue('label');
        if (labels.length === 3) {
            return;
        }
        const nextLabels = labels.concat({});
        form.setFieldsValue({
            label: nextLabels,
        });
    };

    removeLabel = (index) => {
        const { form } = this.props;
        const labels = form.getFieldValue('label');
        if (labels.length === 1) {
            return;
        }
        form.setFieldsValue({
            label: labels.filter((label, t_index) => t_index != index)
        });
    };

    /**
     * #1添加类目：
     *  1、在原有的数组集合中 新增一个数据
     */
    addCategory = () => {
        const { form } = this.props;
        console.log("form", form)
        //传参的数据
        const categorys = form.getFieldValue('categorys');
        console.log("categorys", categorys)
        if (categorys.length === 3) {
            return;
        }
        const nextCategory = categorys.concat({ itemId: null });
        console.log("nextCategory", nextCategory)
        this.setState({
            categorys: nextCategory
        })
        form.setFieldsValue({
            categorys: nextCategory,
        });
    };

    removeCategory = (index) => {
        const { form } = this.props;
        const categorys = form.getFieldValue('categorys');
        if (categorys.length === 1) {
            return;
        }
        form.setFieldsValue({
            categorys: categorys.filter((category, t_index) => t_index != index)
        });
    };

    /**
     * #3
     * @param value  选中值
     * @param index  类目下标
     */
    handleSelectItemChange = (value, index) => {
        console.log("当前选中类目", value)
        this.updateCategory(index, 'itemId', value)

    }

    /**
     * #99 修改category 数据
     * @param index  category下标
     * @param key    参数 key
     * @param value  值
     */
    updateCategory(index, key, value) {
        const { form } = this.props;
        const categorys = form.getFieldValue('categorys');
        console.log("修改之前[" + index + "]", categorys);
        categorys[index][key] = value;
        form.setFieldsValue({
            categorys: categorys,
        });
        this.setState({
            categorys: categorys
        }, () => {
            console.log("修改之后[" + index + "]", this.state.categorys);
        })
    }

    //省份选择
    handleProvinceChange = (value, index) => {
        this.updateCategory(index, 'provinceId', value)
        var url = '/manage/school/queryNoPage'
        const searchCondiction = new Object()
        searchCondiction.pageSize = 999;
        searchCondiction.pageNumber = 1;
        const conditionList = [];
        const condition = {
            code: "provinceId",
            type: "Number",
            operator: 1,
            value: parseInt(value)
        }
        conditionList.push(condition)
        searchCondiction.conditionList = conditionList;
        fetch(url, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(searchCondiction)
        }).then((response) => {
            return response.json()
        }).then((res) => {
            if (res.code == 200) {
                this.setState({
                    schools: res.result
                });
            }
        })
    }

    //学校选择
    handleSchoolChange = (value, index) => {
        this.updateCategory(index, 'schoolId', value);
        this.getSchool(value)  
    }

    //学校请求
    getSchool(value){
        var url = '/manage/special/queryNoPage'
        const searchCondiction = new Object()
        searchCondiction.pageSize = 999;
        searchCondiction.pageNumber = 1;
        const conditionList = [];
        const condition = {
            code: "schoolId",
            type: "Number",
            operator: 1,
            value: parseInt(value)
        }
        conditionList.push(condition)
        searchCondiction.conditionList = conditionList;
        fetch(url, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(searchCondiction)
        }).then((response) => {
            return response.json()
        }).then((res) => {
            if (res.code == 200) {
                this.setState({
                    specials: res.result
                });
            }
        })

    }



    //专业选择
    handleSpecialChange = (value, index) => {
        this.updateCategory(index, 'specialId', value);
    }

    //学历等级选择
    handleEduLevelsChange = (value, index) => {
        this.updateCategory(index, 'eduLevelId', value);
    }

    //地区选择
    handleAreaChange = (value, index) => {
        this.updateCategory(index, 'continentId', value);
        console.log(" this.state.areas",this.state.areas)
        this.state.areas.map(area => {
            if (parseInt(area.continent_id) === value) {
                this.setState({
                    selectArea: area.country
                })
            }
        })
    }

    //国家/地区
    handleSelectAreaChange = (value, index) => {
        this.updateCategory(index, 'countryId', value);
        var url = '/manage/school/queryNoPage'
        const searchCondiction = new Object()
        searchCondiction.pageSize = 999;
        searchCondiction.pageNumber = 1;
        const conditionList = [];
        const condition = {
            code: "countryId",
            type: "Number",
            operator: 1,
            value: parseInt(value)
        }
        conditionList.push(condition)
        searchCondiction.conditionList = conditionList;
        fetch(url, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(searchCondiction)
        }).then((response) => {
            return response.json()
        }).then((res) => {
            if (res.code == 200) {
                this.setState({
                    schools: res.result
                });
            }
        })
    }

    //语言类型
    handleLanguageTypeChange = (value, index) => {
        this.updateCategory(index, 'languageType', value);
    }

    //语言类型
    handleLanguageTypeChange = (value, index) => {
        this.updateCategory(index, 'languageType', value);
    }

    //企业类型
    handleEnterpriseTypeChange = (value, index) => {
        this.updateCategory(index, 'enterpriseType', value);
    }

    //自我介绍
    handleEditorChange = (editorState) => {
        this.setState({ editorState })
    }

    //数据映射
    nameChange = (name,key) => {
        if(key == "provinces"){
            this.state.provinces.map(province =>{
                if(name == province.provinceId){
                    console.log("province.province",province.province)
                    return province.province
                }
            })

        }
       
    }

    render() {
        const { visible, onCancel, onCreate, form, okText, title } = this.props;
        const { getFieldDecorator, getFieldValue } = form;
        const controls = ['bold', 'italic', 'underline', 'text-color', 'separator', 'link', 'separator']
        const formItemLayout = {
            labelCol: {
                xs: { span: 30 },
                sm: { span: 4 },
            },
            wrapperCol: {
                xs: { span: 15 },
                sm: { span: 15 },
            },
        };
        const formItemLayoutWithOutLabel = {
            wrapperCol: {
                xs: { span: 24, offset: 0 },
                sm: { span: 20, offset: 4 },
            },
        };
        const props = {
            name: 'image',
            listType: 'picture',
            multiple: false,
            action: '/manage/image/upload',
            // beforeUpload: this.beforeUpload,
            onChange: this.handleChange.bind(this)
        };
        getFieldDecorator('fxOrdNum')
        getFieldDecorator('tjOrdNum')
        getFieldDecorator('fastAskPrice')
        //添加话题
        getFieldDecorator('topic', { initialValue: this.state.topic });
        const topics = getFieldValue('topic');
        const items = this.state.items;
        const formItems = topics && topics.map((topic, index) => (
            <div key={`topic${index}`} >
                <Form.Item
                    {...(formItemLayout)}
                    label={'话题'}
                    required={false}
                    key={`topicName[${index}]`}
                >
                    {getFieldDecorator(`topicName[${index}]`, { initialValue: topic.topicName }, {
                        validateTrigger: ['onChange', 'onBlur'],
                        rules: [
                            {
                                required: true,
                                whitespace: true,
                                message: "请输入话题",
                            },
                        ],
                    })(<Input style={{ width: '40%' }} onChange={event => { this.setTopicName(event, index) }} />)}
                    {topics.length > 1 ? (
                        <Icon
                            className="dynamic-delete-button"
                            type="minus-circle-o"
                            onClick={() => this.removeTopic(index)}
                        />
                    ) : null}
                </Form.Item>
                <Form.Item
                    {...(formItemLayout)}
                    label={'语音价格'}
                    required={false}
                    key={`topicVoicePrice[${index}]`}
                >
                    {getFieldDecorator(`topicVoicePrice[${index}]`, { initialValue: topic.voicePrice }, {
                        validateTrigger: ['onChange', 'onBlur'],
                        rules: [
                            {
                                required: true,
                                whitespace: true,
                                message: "请输入语音价格",
                                pattern: /(^[0-9]{1,9}$)|(^[0-9]{1,9}[.]{1}[0-9]{1,2}$)/,
                            },
                        ],
                    })(<Input style={{ width: '40%' }} onChange={event => { this.setTopicVoicePrice(event, index) }} />)}
                </Form.Item>
                <Form.Item
                    {...(formItemLayout)}
                    label={'约见价格'}
                    required={false}
                    key={`topicMeetPrice[${index}]`}
                >
                    {getFieldDecorator(`topicMeetPrice[${index}]`, { initialValue: topic.meetPrice }, {
                        validateTrigger: ['onChange', 'onBlur'],
                        rules: [
                            {
                                required: true,
                                whitespace: true,
                                message: "请输入约见价格",
                                pattern: /(^[0-9]{1,9}$)|(^[0-9]{1,9}[.]{1}[0-9]{1,2}$)/,
                            },
                        ],
                    })(<Input style={{ width: '40%' }} onChange={event => { this.setTopicMeetPrice(event, index) }} />)}
                </Form.Item>
            </div>
        ));
        //添加标签
        getFieldDecorator('label', { initialValue: this.state.label });
        const labels = form.getFieldValue('label')
        const formLabels = labels && labels.map((label, index) => (
            <div key={`label${index}`} >
                <Form.Item
                    {...(formItemLayout)}
                    label={'标签'}
                    required={false}
                    key={`labelName[${index}]`}
                >
                    {getFieldDecorator(`labelName[${index}]`, { initialValue: label.labelName }, {
                        validateTrigger: ['onChange', 'onBlur'],
                        rules: [
                            {
                                required: true,
                                whitespace: true,
                                message: "请输入标签名",
                            },
                        ],
                    })(<Input style={{ width: '40%' }} onChange={event => { this.setLabelName(event, index) }} />)}
                    {labels.length > 1 ? (
                        <Icon
                            className="dynamic-delete-button"
                            type="minus-circle-o"
                            onClick={() => this.removeLabel(index)}
                        />
                    ) : null}
                </Form.Item>
            </div>
        ));
        //添加类目
        getFieldDecorator('categorys', { initialValue: this.state.categorys });
        let provincename
        const categorys = form.getFieldValue('categorys')
        console.log("1111",categorys)
        /**
         * #2 遍历类目
         *
         * @type {any|*}
         */
        const formCategory = categorys && categorys.map((category, index) => (
            <div key={`category${index}`} >
                <Form.Item
                    {...(formItemLayout)}
                    label={'类目'}
                    required={true}
                    key={`category[${index}]`}
                >
                    {getFieldDecorator(`itemId[${index}]`, { initialValue: category.itemId }, {
                        rules: [{ required: true, message: '请选择类目' }],
                    })(
                        <Select value={category.itemId} onChange={event => { this.handleSelectItemChange(event, index) }}>
                            {items.map(item => (
                                <Option key={item.id} value={item.id}>{item.itemName}
                                </Option>

                            ))}
                        </Select>
                    )}
                    {categorys.length > 1 ? (
                        <Icon
                            className="dynamic-delete-button"
                            type="minus-circle-o"
                            onClick={() => this.removeCategory(index)}
                        />
                    ) : null}
                </Form.Item>
                {(category.itemId == 1 || category.itemId == 4) ? <div>
                    
                    <FormItem label="省份" {...formItemLayout} hasFeedback key={`province[${index}]`}>
                        {
                            getFieldDecorator(`provinceId[${index}]`, { initialValue: category.provinceId }, {
                            rules: [{ required: true, message: '请选择省份' }],
                        })(
                            <Select style={{ width: 180 }} value={category.provinceId} onChange={(value) => this.handleProvinceChange(value, index)}
                            >
                                {this.state.provinces.map(province =>(
                                    <Option key={province.provinceId} value={parseInt(province.provinceId)}>{province.province}</Option>
                                ))
                                }

                            </Select>
                        )}
                    </FormItem>
                    <FormItem label="学校" {...formItemLayout} hasFeedback key={`school[${index}]`}>
                        {getFieldDecorator(`schoolId[${index}]`, { initialValue: category.schoolName }, {
                            rules: [{ required: true, message: '请选择学校' }],
                        })(
                            <Select style={{ width: 180 }} value={category.schoolId} onChange={(value) => this.handleSchoolChange(value, index)}
                            >
                                {this.state.schools.map(school => (
                                    <Option key={school.schoolId} value={school.schoolId}>{school.schoolName}</Option>
                                ))}
                            </Select>
                        )}
                    </FormItem>
                    <FormItem label="专业" {...formItemLayout} hasFeedback key={`special[${index}]`}>
                        {getFieldDecorator(`specialId[${index}]`, { initialValue: category.specialName }, {
                            rules: [{ required: true, message: '请选择专业' }],
                        })(
                            <Select style={{ width: 180 }} value={category.specialId} onChange={(value) => this.handleSpecialChange(value, index)}>
                                {this.state.specials.map(special => (
                                    <Option key={special.id} value={special.id}>{special.specialName}</Option>
                                ))}
                            </Select>
                        )}
                    </FormItem>
                    <FormItem label="学历等级" {...formItemLayout} hasFeedback key={`eduLevel[${index}]`}>
                        {getFieldDecorator(`eduLevelId[${index}]`, { initialValue: category.eduLevelId }, {
                            rules: [{ required: true, message: '请学历等级' }],
                        })(
                            <Select style={{ width: 180 }} value={category.eduLevelId} onChange={(value) => this.handleEduLevelsChange(value, index)}>
                                {this.state.eduLevels.map(eduLevel => (
                                    <Option key={eduLevel.id} value={parseInt(eduLevel.id)}>{eduLevel.name}</Option>
                                ))}
                            </Select>
                        )}
                    </FormItem>
                </div> : null}
                {category.itemId == 2 ? <div>
                    <FormItem label="区域" {...formItemLayout} hasFeedback key={`continent[${index}]`}>
                        {getFieldDecorator(`continentId[${index}]`, { initialValue: category.continentId }, {
                            rules: [{ required: true, message: '请选择区域' }],
                        })(
                            <Select style={{ width: 180 }} value={category.continentId} onChange={(value) => this.handleAreaChange(value, index)}
                            >
                                {this.state.areas.map(area => (
                                    <Option key={area.continent_id} value={parseInt(area.continent_id)}>{area.continent_name}</Option>
                                ))}
                            </Select>
                        )}
                    </FormItem>
                    <FormItem label="国家/地区" {...formItemLayout} hasFeedback key={`country[${index}]`}>
                        {getFieldDecorator(`countryId[${index}]`, { initialValue: category.countryId }, {
                            rules: [{ required: true, message: '国家/地区' }],
                        })(
                            
                            <Select style={{ width: 180 }} value={category.countryId} onChange={(value) => this.handleSelectAreaChange(value, index)}
                            >
                               
                                {this.state.selectArea.map(area => (
                                    <Option key={area.country_id} value={parseInt(area.country_id)}>{area.country_name}</Option>
                                ))}
                            </Select>
                        )}
                    </FormItem>
                    <FormItem label="学校" {...formItemLayout} hasFeedback key={`school[${index}]`}>
                        {getFieldDecorator(`schoolId[${index}]`, { initialValue: category.schoolName }, {
                            rules: [{ required: true, message: '请选择学校' }],
                        })(
                            <Select style={{ width: 180 }} value={category.schoolId} onChange={(value) => this.handleSchoolChange(value, index)}>
                                {this.state.schools.map(school => (
                                    <Option key={school.schoolId} value={school.schoolId}>{school.schoolName}</Option>
                                ))}
                            </Select>
                        )}
                    </FormItem>
                    <FormItem label="学历等级" {...formItemLayout} hasFeedback key={`eduLevel[${index}]`}>
                        {getFieldDecorator(`eduLevelId[${index}]`, { initialValue: category.eduLevelId }, {
                            rules: [{ required: true, message: '请学历等级' }],
                        })(
                            <Select style={{ width: 180 }} value={category.eduLevelId} onChange={(value) => this.handleEduLevelsChange(value, index)}>
                                {this.state.eduLevels.map(eduLevel => (
                                    <Option key={eduLevel.id} value={parseInt(eduLevel.id)}>{eduLevel.name}</Option>
                                ))}
                            </Select>
                        )}
                    </FormItem>
                </div> : null}
                {category.itemId == 3 ?
                    <FormItem label="语言类型" {...formItemLayout} hasFeedback key={`languageType[${index}]`}>
                        {getFieldDecorator(`languageType[${index}]`, { initialValue: category.languageType }, {
                            rules: [{ required: true, message: '请语言类型' }],
                        })(
                            <Select style={{ width: 180 }} value={category.languageType} onChange={(value) => this.handleLanguageTypeChange(value, index)}>
                                <Option key={1} value={1}>{'托福'}</Option>
                                <Option key={2} value={2}>{'GMAT'}</Option>
                                <Option key={3} value={3}>{'雅思'}</Option>
                                <Option key={4} value={4}>{'GRE'}</Option>
                            </Select>
                        )}
                    </FormItem> : null}
                {category.itemId == 5 ?
                    <FormItem label="企业类型" {...formItemLayout} hasFeedback key={`enterpriseType[${index}]`}>
                        {getFieldDecorator(`enterpriseType[${index}]`, { initialValue: category.enterpriseType }, {
                            rules: [{ required: true, message: '请企业类型' }],
                        })(
                            <Select
                                style={{ width: 180 }} value={category.enterpriseType} onChange={(value) => this.handleEnterpriseTypeChange(value, index)}>
                                <Option key={1} value={1}>{'金融'}</Option>
                                <Option key={2} value={2}>{'咨询'}</Option>
                                <Option key={3} value={3}>{'互联网'}</Option>
                                <Option key={4} value={4}>{'建筑'}</Option>
                                <Option key={5} value={5}>{'4A广告'}</Option>
                                <Option key={6} value={6}>{'快速消费品'}</Option>
                                <Option key={7} value={7}>{'房地产'}</Option>
                                <Option key={8} value={8}>{'医疗器械'}</Option>
                                <Option key={9} value={9}>{'其他'}</Option>
                            </Select>
                        )}
                    </FormItem> : null}
            </div>
        ));
        return (
            <Modal
                visible={visible}
                title={title}
                okText={okText}
                onCancel={onCancel}
                onOk={onCreate}
            >
                <Form layout="horizontal">
                    {getFieldDecorator('id')(
                        <Input type='hidden' />
                    )}
                    <FormItem label="姓名" {...formItemLayout} hasFeedback>
                        {getFieldDecorator('fullName', {
                            rules: [{ required: true, message: '请输入导师姓名！' }],
                        })(
                            <Input style={{ width: 180 }} />
                        )}
                    </FormItem>
                    <FormItem label="图片" {...formItemLayout} hasFeedback>
                        {getFieldDecorator('avatarUrl', {
                            rules: [{ required: true, message: '请上传导师图片！' }]
                        })(
                            <Input style={{ width: 180 }} placeholder="建议图片宽高相等" />
                        )}
                    </FormItem>
                    <Dragger {...props}>
                        <p className="ant-upload-drag-icon">
                            <Icon type="inbox" />
                        </p>
                        <p className="ant-upload-text">点击或拖拽上传</p>
                    </Dragger>
                    <FormItem label="导师openid" {...formItemLayout} hasFeedback>
                        {getFieldDecorator('openid', {
                            rules: [{ required: true, message: '请输入导师openid！' }],
                        })(
                            <Input style={{ width: 180 }} />
                        )}
                    </FormItem>
                    <FormItem label="手机号码" {...formItemLayout} hasFeedback>
                        {getFieldDecorator('phoneNum', {
                            rules: [{ required: true, message: '请输入手机号码！' }],
                        })(
                            <Input style={{ width: 180 }} />
                        )}
                    </FormItem>
                    <FormItem label="是否推荐" {...formItemLayout} hasFeedback>
                        {getFieldDecorator('isTj', {
                            rules: [{ required: true, message: '请选择是否推荐' }],
                        })(
                            <Select placeholder={'是否展示在推荐导师页'}>
                                <Option key={1} value={1}>{'是'}</Option>
                                <Option key={0} value={0}>{'否'}</Option>
                            </Select>
                        )}
                    </FormItem>
                    {form.getFieldValue('isTj') == 1 ? <FormItem label="推荐序号" {...formItemLayout} hasFeedback>
                        {getFieldDecorator('tjOrdNum', {
                            rules: [{ required: true}],
                            initialValue: form.getFieldValue('tjOrdNum')
                        })(
                            <InputNumber style={{ width: 180 }} placeholder={'请输入推荐序号'}/>
                        )}
                    </FormItem> : null
                    }
                    <FormItem label="是否发现" {...formItemLayout} hasFeedback>
                        {getFieldDecorator('isFx', {
                            rules: [{ required: true, message: '请选择是否发现' }],
                        })(
                            <Select placeholder={'是否展示在发现页'}>
                                <Option key={1} value={1}>{'是'}</Option>
                                <Option key={0} value={0}>{'否'}</Option>
                            </Select>
                        )}
                    </FormItem>
                    {form.getFieldValue('isFx') == 1 ? <FormItem label="发现序号" {...formItemLayout} >
                        {getFieldDecorator('fxOrdNum', {
                            rules: [{ required: true}],
                        })(
                            <InputNumber style={{ width: 180 }} placeholder={'请输入发现序号'}/>
                        )}
                    </FormItem> : null
                    }
                    <FormItem label="是否快问" {...formItemLayout} hasFeedback>
                        {getFieldDecorator('isFastAsk', {
                            rules: [{ required: true, message: '请选择是否快问' }],
                        })(
                            <Select placeholder={'是否展示在快问模块'}>
                                <Option key={1} value={1}>{'是'}</Option>
                                <Option key={0} value={0}>{'否'}</Option>
                            </Select>
                        )}
                    </FormItem>
                    {form.getFieldValue('isFastAsk') == 1 ? <FormItem label="快问价格" {...formItemLayout} >
                        {getFieldDecorator('fastAskPrice', {
                            rules: [{ required: true}],
                        })(
                            <InputNumber style={{ width: 180 }} placeholder={'请输入快问价格'}/>
                        )}
                    </FormItem> : null
                    }
                    <FormItem label="所在地" {...formItemLayout} hasFeedback>
                        {getFieldDecorator('location', {
                            rules: [{ required: true, message: '请输入所在地！' }],
                        })(
                            <Input style={{ width: 180 }} />
                        )}
                    </FormItem>
                    <Form.Item {...formItemLayoutWithOutLabel}>
                        <Button type="dashed" onClick={this.addTopic} style={{ width: '60%' }}>
                            <Icon type="plus" /> 添加话题
                        </Button>
                    </Form.Item>{formItems}

                    <Form.Item {...formItemLayoutWithOutLabel}>
                        <Button type="dashed" onClick={this.addLabel} style={{ width: '60%' }}>
                            <Icon type="plus" /> 添加标签
                        </Button>
                    </Form.Item>{formLabels}

                    <Form.Item {...formItemLayoutWithOutLabel}>
                        <Button type="dashed" onClick={this.addCategory} style={{ width: '60%' }}>
                            <Icon type="plus" /> 添加类目
                        </Button>
                    </Form.Item>{formCategory}
                </Form>
                <FormItem label="自我介绍" {...formItemLayout} hasFeedback>
                    {getFieldDecorator('descrition_NotFileter', {
                        rules: [{ required: true, message: '请填写自我介绍！' }],
                    })(
                        <BraftEditor
                            value={this.state.editorState}
                            controls={controls}
                            onChange={this.handleEditorChange}
                            onSave={this.submitContent}
                            style={{ height: "250" }}
                        />
                    )}
                </FormItem>
                <FormItem label="咨询价格" {...formItemLayout} hasFeedback>
                    {getFieldDecorator('consultPrice', {
                        rules: [{ required: true, message: '咨询价格' }],
                    })(
                        <Input type="number" />
                    )}
                </FormItem>
                <FormItem label="优惠价格" {...formItemLayout} hasFeedback>
                    {getFieldDecorator('preferentialPrice', {
                        rules: [{ required: true, message: '请填写优惠价格！' }],
                    })(
                        <Input type="number" />
                    )}
                </FormItem>
            </Modal>
        );
    }
}

const TutorCreateForm = Form.create()(TutorForm);
export default TutorCreateForm;